<template>
  <div class="preson">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>求和：{{ sum }}</h2>
    <button @click="changeSum">点击+1</button>

    <hr />
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Preson">
  import { ref,reactive,watch} from "vue";
  // 数据 情况一：监视【ref】定义的【基本类型】数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value+=1
  }
  // 监视
  const stopWatch = watch(sum,(now,old)=>{
    console.log(now,old)
    if (now >= 10) stopWatch()
  })

  // 数据 情况二：监视【ref】定义的【对象类型】数据
  let person = ref({
    name:'张三',age:18
  })
  // 方法
  function changeName(){
    person.value.name = '李四'
  }
  function changeAge(){
    person.value.age +=1
  }
  function changePerson(){
    person.value = {
      name:'王五',age:90
    }
  }
  // 监视 监视的是对象的地址值,若想监视对象内部属性的变化,需要深度监视
  watch(person,(now,old)=>{
    console.log(now,old)
  },{
    deep:true,//深度
    immediate:true//立即监视
  })

  //数据 情况三：监视【reactive】定义的【对象类型】数据
  let persons = reactive({
    name:'张三',age:18
  })
  // 方法
  function changeName1(){
    persons.name = '李四'
  }
  function changeAge1(){
    persons.age +=1
  }
  function changePerson1(){ 
    Object.assign(persons,{name:'王五',age:90})
  }
  // 监视reactive定义的数据时,默认deep为true
  watch(persons,(now,old)=>{
    console.log(now,old)
  })

  //数据 情况四：监视【ref或reactive】定义的【对象类型】数据
</script>

<style scoped>
.preson {
  background-color: skyblue;
  box-shadow: 0 0 10px 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
